<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/>
    <title>支付宝转账</title>
    <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js"></script>
    <script th:src="@{/js/qrcode.min.js}"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
    <style>
        html, body {
            width: 100%;
            min-height: 100%;
            margin: 0;
            padding: 0;
            font-size: 14px;
        }

        .wrapper {
            margin: 0 auto;
            max-width: 900px;
            min-height: 100vh;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .mobile-wrapper {
            width: 100%;
            max-width: 400px;
            min-width: 320px;
            min-height: 600px;
            padding: 15px;
            box-sizing: border-box;
            background-color: #00a2ea;
        }

        .mobile-wrapper .content-top {
            margin: auto;
            padding: 5px 10px 0 10px;
            background: #fff;
            border-radius: 5px;
        }

        .mobile-wrapper .logo {
            text-align: center;
        }

        .mobile-wrapper .logo img {
            width: 16%;
            height: 16%;
        }

        .mobile-wrapper .info {
            line-height: 20px;
            text-align: center;
            display: none;
        }

        .mobile-wrapper .qrcode {
            text-align: center;
        }

        .mobile-wrapper .qrcode img {
            display: inline !important;
            padding: 15px;
        }

        .mobile-wrapper .qrcode .msg {
            display: inline-block;
            padding: 120px 0;
        }

        .mobile-wrapper .money {
            font-size: 30px;
            font-weight: 500;
            text-align: center;
            color: #1f1f1f;
        }

        .mobile-wrapper .money .wait-text {
            color: #aeaeae;
            font-size: 15px;
            line-height: 20px;
            padding-bottom: 6px;
        }

        .mobile-wrapper .warning {
            color: red;
            text-align: center;
            font-size: 22px;
            padding-top: 6px;
            display: none;
        }

        .mobile-wrapper .content-bottom {
            margin-top: 10px;
            padding: 10px 15px;
            background: #fff;
            border-radius: 5px;

        }

        .mobile-wrapper .pay-line {
            font-size: 16px;
            line-height: 24px;
        }

        .mobile-wrapper .pay-line:first-child {
            margin-bottom: 8px;
        }

        .mobile-wrapper .money-discount {
            float: right;
            font-weight: 500;
        }

        .mobile-wrapper .monet-pay {
            float: right;
            font-weight: 500;
        }

        .mobile-wrapper .tip {
            font-size: 14px;
            font-weight: 500;
            text-align: center;
            color: red;
            margin-top: 4px;
        }

        .tutorial .title {
            margin-top: 60px;
            text-align: center;
            font-size: 30px;
        }

        .tutorial .info {
            font-size: 24px;
            line-height: 30px;
            margin-bottom: 14px;
            text-align: center;
        }

        .tutorial .info:first-child {
            padding-bottom: 0px;
        }

        .tutorial .img-show {
            height: 330px;
            position: relative;
            overflow: hidden;
        }

        .tutorial .img-show img {
            position: absolute;
            top: -100px;
        }


        .blueColor {
            color: #32a8f9;
        }

        .redColor {
            color: #e5373d;
        }

        @media screen and (max-width: 800px) {
            .wrapper {
                justify-content: space-around;
            }

            .mobile-wrapper .logo {
                padding: 0 0 0 10px;
            }

            .mobile-wrapper .info {
                display: block;
                padding-bottom: 8px;
            }

            .tutorial {
                display: none;
            }
        }

        @media screen and (max-width: 500px) {
            .wrapper {
                margin: 0;
                width: 100%;
                min-height: 100vh;
            }

            .mobile-wrapper {
                width: 100%;
                max-width: 500px;
                min-height: 100vh;
            }
        }

        @media screen and (max-width: 380px) {
            .mobile-wrapper .tip {
                font-size: 12px;
            }
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class='mobile-wrapper'>
        <div class='content-top'>
            <div class="logo">
                <span style="font-size: 20px">支付宝账号转账</span>
            </div>
            <div style="text-align: center" th:text="'订单：'+${channelOrder.childOrderno}"/>
            <div id="amount" class="money" th:text="'¥：'+${channelOrder.amount}">
            </div>
            <div class="tip" style="font-size: 15px;">
                注意：付款务必输入以上金额,订单超时请勿付款,否则充值失败!
                </span>
            </div>
            <div style="text-align: left;font-size: 20px;">
                <span>支付宝账号：</span> <span style="color: blue" th:text="${channelOrder.account}"></span>
            </div>
            <div style="text-align: left;font-size: 20px;">
                <span>姓名：</span> <span style="color: blue" th:text="${channelOrder.accountName}"></span>
            </div>
<!--            <div class="tps_btn" style="padding-top: 3px;" onclick="pay2()">-->
<!--                <a style="width:100%;cursor: pointer; color: #fff;text-decoration: none; text-align: center;padding: .55rem 0; display: inline-block;border-radius: .3rem; font-size: 14px;background-color: #428bca; border: 1px solid #428bca;letter-spacing:normal;font-weight: normal">开始转账（推荐方案,无需加好友）</a>-->
<!--            </div>-->
<!--            <div style="color: red">如果以上方案不行，请使用以下方案进行付款：</div>-->
            <div class="tps_btn" style="padding-top: 10px; text-align: center">
                <a  id="clipUrl" data-clipboard-text="" style="width:100%;cursor: pointer; color: #fff;text-decoration: none; text-align: center;padding: .55rem 0; display: inline-block;border-radius: .3rem; font-size: 14px;background-color: #428bca; border: 1px solid #428bca;letter-spacing:normal;font-weight: normal">点我==》【复制账号】</a>
                <div id="clipSuccess" style="display: none;color: red">复制成功</div>
            </div>
            <div class="tps_btn" style="padding-top: 3px;" onclick="pay()">
                <a style="width:100%;cursor: pointer; color: #fff;text-decoration: none; text-align: center;padding: .55rem 0; display: inline-block;border-radius: .3rem; font-size: 14px;background-color: #428bca; border: 1px solid #428bca;letter-spacing:normal;font-weight: normal">打开支付宝</a>
            </div>
            <div class="content-bottom">
                <div class="pay-line" style="text-align: center;">
                    <label>剩余支付时间:</label><label style="color: #ff9655" id="min"></label>：<label style="color: #ff9655"
                                                                                                 id="second"></label>
                </div>
            </div>
            <div id="wraning" class="warning">
                <label th:text="${channelOrder.childOrderno}"></label>
            </div>
            <div id="qrcode">
            </div>
            <div class="info">
                1.打开支付宝首页 --》转账--》转账支付宝--》输入支付宝账号-->输入金额.<br>
                2.为避免输错账号请务必复制账号进行付款<br>
            </div>
            <div style="color: blue;cursor: pointer;text-decoration: underline;margin: 10px 0 0 10px;" onclick="guide()">查看教程</div>
        </div>
    </div>
    <div class="tutorial">
        <h3 class="title">付款教程</h3>
        <div class="info">
            打开
            <span class="redColor">支付宝首页</span>
            ，点击<span class="blueColor">转账--》转账支付宝--》输入支付宝账号-->输入金额点确定完成转账.</span>
        </div>
        <!--<div class="info">-->
        <!--选择<span class="blueColor">“相册”</span>-->
        <!--</div>-->
        <div class="img-show">
            <img src="https://staticjy.oss-cn-hangzhou.aliyuncs.com/WechatIMG18.jpeg" alt="图片" width="376">
        </div>
    </div>

</div>
<!--<div id="#copy" style="text-align: center;color: red;font-size: 25px">-->
<!--<div>-->
<!--1. 复制金额-->
<!--</div>-->
<!--2.截屏保存图片-->
<!--<div>-->
<!--3.打开微信<span style="color: blue">"扫一扫"</span>-->
<!--</div>-->
<!--<div class="tps_btn" style="padding-top: 10px;">-->
<!--<a id="clipUrl" data-clipboard-text=""-->
<!--style="cursor: pointer; color: #fff;text-decoration: none; text-align: center;padding: .55rem 0; display: inline-block; width: 41%; border-radius: .3rem; font-size: 14px;background-color: #428bca; border: 1px solid #428bca;letter-spacing:normal;font-weight: normal">复制金额</a>-->
<!--<div id="clipSuccess" style="display: none;color: red">复制成功</div>-->
<!--</div>-->
<!--<div class="tps_btn1" style="padding-top: 10px;width: 1200px;height: 600px;">-->
<!--<a id="clipUrl2" data-clipboard-text=""-->
<!--style="cursor: pointer; color: #fff;text-decoration: none; text-align: center;padding: .55rem 0; display: inline-block; width: 41%; border-radius: .3rem; font-size: 14px;background-color: #428bca; border: 1px solid #428bca;letter-spacing:normal;font-weight: normal">下一步,截屏保存图片</a>-->
<!--</div>-->
<!--</div>-->
<script th:inline="javascript">
    var time = [[${time}]];
    time = parseInt(time / 1000);

    function getClockString(str) {
        if (str < 10) {
            return '0' + str;
        }
        return str;
    }

    function clock() {
        var min = getClockString(parseInt(time / 60));
        var second = getClockString(parseInt(time % 60));
        document.getElementById("min").innerHTML = (min);
        document.getElementById("second").innerHTML = (second);
        if (min <= 0 && second <= 0) {
            return;
        }
        time--;
        setTimeout(function () {
            clock()
        }, 1000);
    }

    clock();

    $().ready(function () {
        var amount = [[${channelOrder.amount}]];
        // window.alert('注意：请务必复制账号进行付款!');
        getStatus();
    })

    function getStatus() {
        // 定时器
        var interval2 = window.setInterval(function () {
            var orderId = [[${channelOrder.orderId}]];
            var url = "../orderStatus/" + orderId;
            $.get(url, function (data) {
                if (data.data.successTime) {
                    window.clearInterval(interval2);
                    $('#qrcode').html('<div style="color: red;font-size: 25px;">支付成功,切勿重复支付!</div>')
                } else if (data.data.orderStatus == '4') {
                    window.clearInterval(interval2);
                    $('#qrcode').html('<div style="color: red;font-size: 25px;">订单超时,切勿付款!</div>')
                }
            })
        }, 5000)
    }

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }


    var clipUrl = [[${channelOrder.account}]];
    $("#clipUrl").attr("data-clipboard-text", clipUrl); // 设置
    $("#clipUrl").show();
    var clipboard = new ClipboardJS('#clipUrl');
    var boolean = false;
    clipboard.on('success', function (e) {
        $("#clipSuccess").show();
        setTimeout(function () {
            $("#clipSuccess").hide();
        }, 10000)
        boolean = true;
    });

    clipboard.on('error', function (e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });

    function guide() {

        layer.open({
            offset: ['0', '0'],
            title: '教程'
            ,content: ' <img src="/img/guid/alipyzz.png" style="width: 100%">\n',
            btn: ['确定'],
            btn1: function(index, layero){
                layer.close(index);
            }
        });
    }

    function pay() {
        var url = 'alipays://platformapi/startapp?appId=09999988&actionType=toAccount&goBack=NO&amount=&userId=&memo='
        location.href = url;
    }

    function pay2(){
        var qrcodeUrl= [[${channelOrder.cardId}]];
        var url = 'alipays://platformapi/startapp?appId=20000067&url='+window.encodeURIComponent(qrcodeUrl);
        location.href =url;
    }

</script>
<noscript>您的浏览器不支持javascript</noscript>
</body>
</html>